<template>
  <div class="home">
    <div class="homeTop">
      <LayoutHeader v-if="!$store.isBtnTop"></LayoutHeader>
      <!-- 音量 -->
      <div class="vol">
        <el-slider :disabled="false" v-model="volume" @change="changeVol"> </el-slider>
      </div>
    </div>
    <main>
        <!-- 音响设备列表 -->
      <div class="acousticEquip">
        <div
          class="equip"
          v-for="item in equipList"
          :key="item.undevid"
          @click="equipChecked(item)"
          :class="{ checked: item.isChecked, lineout: item.bycurstate === 14 }"
        >
          <span class="equipName" style="text-align: center">{{ item.cpdevname }}</span>
          <span class="equipState"
            >状态:<span class="stateName">{{ EquipStateEnum[item.bycurstate] }}</span
            ><span> {{ item.bycurvol }}%</span></span
          >

          <span v-if="item.isChecked" class="check">
            <img src="@/assets/checked.svg" alt="" />
          </span>
        </div>

      <div class="equip">
          <span class="equipName" style="text-align: center">192.168.11.115</span>
          <span class="equipState"
            >状态:<span class="stateName">服务器广播节目或者采集音源</span><span> 0%</span></span
          >
      <span class="equipState">
            <img src="@/assets/online.svg" class="img" alt="" />
            <span>0%</span>
          </span>
      <span class="equipMusic">
            <img src="@/assets/music.svg" class="img" alt="" />
          </span>
      </div> 
       <div> 
      <div class="equip" v-for="(item,index) in numbers" :key="index"></div>
      <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
        <div class="equip"></div>
      </div>
       </div>
      <!-- 音乐列表 -->
      <musicList></musicList>

      <!-- 按钮组 -->
      <btnGroup v-if="$store.isBtnTop"></btnGroup>
    </main>
  </div>
</template>
<script>
import LayoutHeader from '@/components/LayoutHeader';
import { EquipStateEnum } from '../home/components/equipList/enum';
import btnGroup from '@/views/layout/home/components/btnGroup'; //按钮组件
import musicList from '@/views/layout/home/components/musicList'; //按钮组件
import equipList from '@/views/layout/home/components/equipList'; //按钮组件
export default {
  name: 'home',
  components: {
    LayoutHeader,
    btnGroup,
    musicList,
    equipList
  },
  data() {
    return {
      equipList: [], //获取音响设备列表

      EquipStateEnum: null, //设备状态枚举

      numbers: [],
      volume: 0
    };
  },
  mounted() {
    // this.$store.dispatch('getEquipList'); //获取音响设备列表

    // this.equipList = this.$store.equipList;

    this.EquipStateEnum = EquipStateEnum;
    this.getNumber();
  },
  methods: {
    changeVol(item) {
      // console.log('当前音量', item);
    },
    /**
     * @use 点击设备事件
     */
    equipChecked(item) {
      console.log(item);

      if (item.bycurstate === 14) {
        return;
      }
      item.isChecked = !item.isChecked;
    },

    /**
     * @use 获取数字数组
     */
    getNumber() {
      var arr = [];
      for (var i = 0; i < 151; i++) {
        arr.push(i);
      }
      this.numbers = arr;
    }
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
